<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script th:src="@{/qinjiang/js/echarts.min.js}"></script>
<link th:href="@{/qinjiang/css/mycss.css}" rel="stylesheet">

<head>
    <meta charset="UTF-8">
    <title>光照度</title>
</head>
<body>
<div th:replace="index::headdiv"></div>

<div id="main" style="width: 100%;height: 600px;"></div>
<div th:replace="index::personal"></div>
<script type="text/javascript">

    $("#btn_add").click(function () {
        $('#myModal').modal();  //弹出
        $.getJSON("/getUser", function (user) {
            $("#txt_statu").val(user.id);
            $("#txt_departmentname").val(user.name);
            $("#txt_parentdepartment").val(user.password);
            $("#txt_departmentlevel").val(user.role);
        });
    });

    //保存按钮
    $("#btn_submit").click(function () {
        id = $("#txt_statu").val();
        name = $("#txt_departmentname").val();
        password = $("#txt_parentdepartment").val();
        role = $("#txt_departmentlevel").val();
        $.getJSON("/updateUser", {id: id, name: name, password: password, role: role}, function (status) {
            if (!status) {
                alert("失败")
            } else {
                doList();
            }
        })
    });

    // 折线图
    var myChart = echarts.init(document.getElementById('main'))
    var gznum = getQueryVariable("id");
    async:false;
    setInterval(function () {
        // 折线图
        var xdate;
        var ydate;
        $.ajax({
            url: "/getgzTimeDate",
            data: {"id": gznum},
            type: 'GET',
            success: function (data) {
                xdate = data;
                $.ajax({
                    url: "/getgzpowerDate",
                    data: {"id" : gznum},
                    type: 'GET',
                    success: function (data) {
                        ydate = data;
                        hrFun(xdate, ydate);
                    },
                });
            },
        });

    }, 2000);

    function hrFun(xdate, ydate) {
        option = {
            title: {
                text: gznum+"号节点光照度电量折线图",
                left: "center",
            },
            xAxis: {
                name: '时间',
                axisLine: {     //抽线设置
                    symbol: ['none', 'arrow'],
                    show:true
                },
                data: xdate
            },
            yAxis: {
                name: '电量/mv',
                axisLine: {     //抽线设置
                    symbol: ['none', 'arrow'],
                    show:true
                },
            },
            series: [
                {
                    data: ydate,
                    type: 'line',
                    label: {
                        show: true,
                        position: 'bottom',
                        textStyle: {
                            fontSize: 20
                        }
                    }
                }
            ]
        };

        myChart.setOption(option);
    }
    // myChart.setOption(option);

    //获取地址栏参数
    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){
                return pair[1];
            }
        }
        return(false);
    }

</script>
</body>
</html>